<template>
  <el-row :gutter="1">
    <el-col :span="3"
      ><div class="grid-content bg-purple">
        <el-tree
          :data="data"
          show-checkbox
          node-key="deptId"
          @node-click="handleNodeClick"
          :default-expanded-keys="[2, 3]"
          :default-checked-keys="[5]"
          :props="defaultProps"
        >
        </el-tree>
      </div>
    </el-col>
    <el-col :span="25">
      <!-- 综合查询表单 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="用户呢称">
          <el-input
            v-model="formInline.nickName"
            placeholder="审批人"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户手机">
          <el-input
            v-model="formInline.phonenumber"
            placeholder="审批人"
          ></el-input>
        </el-form-item>
        <el-form-item label="账号状态">
          <el-select v-model="formInline.status" placeholder="活动区域">
            <el-option label="正常" value="0"></el-option>
            <el-option label="停用" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- 综合查询表单 -->
      <el-button
        type="primary"
        @click="dialogVisible = true"
        icon="el-icon-circle-plus-outline"
        >添加用户</el-button
      >
      <el-button type="warning" @click="shuxin" icon="el-icon-refresh"
        >刷新</el-button
      >

      <!-- 模态框 -->
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose"
      >
        <span>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="用户名称">
              <el-input v-model="form.nickName" size="small"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model="form.phonenumber" size="small"></el-input>
            </el-form-item>

            <el-form-item label="账号">
              <el-input v-model="form.userName" size="small"></el-input>
            </el-form-item>
            <el-form-item label="登录密码" prop="pass">
              <el-input
                type="password"
                v-model="form.password"
                autocomplete="off"
                size="small"
              ></el-input>
            </el-form-item>
            <el-form-item label="用户性别">
              <el-select
                v-model="form.sex"
                placeholder="请选择活动区域"
                size="small"
              >
                <el-option label="男" value="0"></el-option>
                <el-option label="女" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="岗位">
              <el-select v-model="form.postId" placeholder="请选择">
                <el-option
                  v-for="item in Syspost"
                  :key="item.postId"
                  :label="item.postName"
                  :value="item.postId"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="角色">
              <el-radio v-model="form.roleId" label="1">普通用户</el-radio>
            </el-form-item>
            <el-form-item label="所属部门">
              <el-select v-model="form.deptId" placeholder="请选择">
                <el-option
                  v-for="item in SysDept"
                  :key="item.deptId"
                  :label="item.deptName"
                  :value="item.deptId"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="form.email" size="small"></el-input>
            </el-form-item>

            <el-form-item label="用户状态">
              <el-radio v-model="form.status" label="0">正常</el-radio>
              <el-radio v-model="form.status" label="2">禁用</el-radio>
            </el-form-item>

            <el-form-item label="备注">
              <el-input type="textarea" v-model="form.remark"></el-input>
            </el-form-item>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="sysusersave()">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 模态框 -->

      <div class="grid-content bg-purple">
        <el-table :data="tableData" height="400" border style="width: 100%">
          <el-table-column prop="userId" label="用户ID" width="100">
          </el-table-column>
          <el-table-column prop="deptName" label="所属部门" width="100">
          </el-table-column>
          <el-table-column prop="nickName" label="用户昵称" width="100">
          </el-table-column>
          <el-table-column prop="phonenumber" label="手机号码" width="110">
          </el-table-column>
          <el-table-column
            prop="sex"
            label="用户性别"
            :formatter="formatRole"
            width="100"
          >
          </el-table-column>

          <el-table-column
            prop="status"
            :formatter="formstatus"
            label="帐号状态"
            width="100"
          >
          </el-table-column>

          <el-table-column prop="createTime" label="创建时间" width="100">
          </el-table-column>
          <el-table-column prop="" label="操作" fixed="right" width="130">
            <template slot-scope="scope">
              <el-button
                type="danger"
                @click="deleteUser(scope.row)"
                icon="el-icon-delete"
                circle
              ></el-button>
              <el-button
                type="primary"
                @click="querybyid(scope.row)"
                icon="el-icon-edit"
                circle
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
      </div></el-col
    >
  </el-row>
</template>


<script>
import {
  getList,
  saveSysUser,
  deleteSysuser,
  zhcx,
  querybyid,
  querydeptId,
  queryUser
} from "@/api/tableUser";

import { getpost } from "@/api/post";
import { getdept, querylistdept } from "@/api/dept";
//import { getList } from "@/utils/request";
export default {
  components: {
    getList: getList
  },

  data() {
    return {
      //综合查询表单
      formInline: {
        nickName: "",
        phonenumber: "",
        status: ""
      },
      labelPosition: "left",
      formLabelAlign: {
        name: "",
        region: "",
        type: ""
      },
      //模态框
      dialogVisible: "true",
      //表单
      form: {
        userId: "",
        nickName: "",
        phonenumber: "",
        userName: "",
        sex: "",
        email: "",
        password: "",
        status: "",
        remark: "",
        deptId: "",
        postId: "",
        roleId: ""
      },

      SysDept: [],
      Syspost: [],
      dialogVisible: false,
      tableData: {},
      data: [],
      defaultProps: {
        children: "children",
        label: "deptName"
      }
    };
  },
  //网页加载事件
  mounted: function() {
    //用户列表显示
    //this.queryUser(); //需要触发的函数
    //部门名称列表显示
    this.querylistdept();
    //岗位表查询
    this.querypost();
    //树形显示方法
    this.queryaaa();
    //列表显示
    this.querylist();
  },

  methods: {
    handleNodeClick(data) {
      console.log(data.deptId);
      this.tableData = [];
      querydeptId(data.deptId).then(response => {
        console.log(response.data);
        this.tableData = response.data;
        console.log(this.tableData);
      });
    },
    //树形图显示方法
    queryaaa() {
      getdept().then(response => {
        console.log(response.data);
        this.data = response.data;
      });
    },
    //刷新按钮
    shuxin() {
      this.querylist();
    },
    //综合查询按钮
    onSubmit() {
      console.log(this.formInline);
      let that = this;
      zhcx(this.formInline).then(response => {
        console.log(response.code);
        if (response.code === 20000) {
          that.tableData = response.data;
        }
      });
    },
    formatRole: function(row, column) {
      return row.sex == "0" ? "男" : row.sex == "1" ? "女" : "无性别";
    },
    formdelFlag: function(row, column) {
      return row.sex == "0" ? "存在" : row.sex == "2" ? "删除" : "";
    },
    formisjudges: function(row, column) {
      return row.sex == "0" ? "不是" : row.sex == "1" ? "是" : "";
    },

    formstatus: function(row, column) {
      return row.status == "0"
        ? "正常"
        : row.status == "1"
        ? "停用"
        : "未知账号";
    },
    //添加方法
    sysusersave() {
      let that = this;
      saveSysUser(this.form).then(response => {
        console.log(response.code);
        if (response.code === 20000) {
          //关闭模态框
          that.dialogVisible = false;
          //将表单数据赋空
          that.form = [];
        }
      });
    },
    //删除方法
    deleteUser(row) {
      console.log(row.userId);
      let that = this;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteSysuser(row.userId).then(response => {
            console.log(response.code);
            if (response.code === 20000) {
              that.querylist();
            }
          });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //根据id查询
    querybyid(row) {
      this.form = [];
      let that = this;
      querybyid(row.userId).then(response => {
        console.log(response.data[0]);
        that.form = response.data[0];
        console.log(that.form);

        //打开模态框
        that.dialogVisible = true;
      });
    },
    //列表显示
    querylist() {
      let that = this;
      getList(this.tableData).then(response => {
        console.log((this.list = response.data));
        that.tableData = response.data;
        console.log(that.tableData);
      });
    },

    //列表显示
    queryUser() {
      let that = this;
      queryUser().then(response => {
        console.log((this.list = response.data));
        that.tableData = response.data;
        console.log(that.tableData);
      });
    },

    //部门列表显示
    querylistdept() {
      let that = this;
      querylistdept(this.SysDept).then(response => {
        that.SysDept = response.data;
        console.log(that.SysDept);
      });
    },
    //岗位表查询
    querypost() {
      let that = this;
      getpost(this.Syspost).then(response => {
        that.Syspost = response.data;
        console.log(that.Syspost);
      });
    },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  }
};
</script>